<template>
  <div id="homeSearch">
    <div class="main">
      <div class="search-box">
        <el-input
          size="large"
          clearable
          :prefix-icon="Search"
          v-model="searchvalue"
          style="width: 100%"
          placeholder="输入关键词..."
        >
          <template #append>
            <el-button size="large" @click="handleTbaleSearch">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="my-tabs df curr">
        <div
          class="item-box"
          @click="handleNavClick('1')"
          :class="{ activenav: active === '1' }"
        >
          院校
          {{ collegeLength }}
        </div>
        <div
          class="item-box"
          style="margin: 0 15px"
          @click="handleNavClick('2')"
          :class="{ activenav: active === '2' }"
        >
          专业
          {{ majorLength }}
        </div>
        <div
          class="item-box"
          @click="handleNavClick('3')"
          :class="{ activenav: active === '3' }"
        >
          职业
          {{ jobListLength }}
        </div>
        <div
          class="item-box"
          @click="handleNavClick('4')"
          :class="{ activenav: active === '4' }"
        >
          资讯
          {{ newsLength }}
        </div>
      </div>

      <div
        class="list-contaier"
        v-infinite-scroll="load"
        :infinite-scroll-immediate="false"
      >
        <yxkTable
          v-if="active == 1"
          :yxkTableList="yxkTableList"
          ref="tableListRef"
        />
        <div
          v-if="active == 1 && yxkTableList.length == 0"
          style="text-align: center; margin-top: 20px"
        >
          暂无数据
        </div>
        <majorList
          v-if="active == 2"
          :majorList="majorListData"
          ref="majorListRef"
        />
        <div
          v-if="active == 2 && JSON.stringify(majorListData) === '{}'"
          style="text-align: center; margin-top: 20px"
        >
          暂无数据
        </div>
        <jobList
          v-if="active == 3"
          :jobListData="jobListData"
          ref="jobListDataRef"
        />

        <newsList
          v-if="active == 4"
          :newsListData="newsListData"
          ref="newsListDataRef"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { getSearchHome } from '@/api/home/home';
import yxkTable from '@/views/searchCollege/components/YxkuTable';
import majorList from '@/views/homeSearch/components/MajorList';
import jobList from '@/views/homeSearch/components/JobList';
import newsList from '@/views/homeSearch/components/NewsList';
import { getLikeSave } from '@/api/searchColleges/searchCollege';

const store = useStore();

const route = useRoute();
const active = ref('1');
const searchvalue = ref('');
const searchData = ref({
  search: '',
  page: 1,
  pageSize: 10,
});
const yxkTableList = ref([]);
const majorListData = ref({});
const jobListData = ref([]);
const newsListData = ref([]);
const tableListRef = ref(null);
const majorListRef = ref(null);
const jobListDataRef = ref(null);
const newsListDataRef = ref(null);
const collegeLength = ref(0);
const jobListLength = ref(0);
const majorLength = ref(0);
const newsLength = ref(0);
const checkedDataList = ref([]);

const handleNavClick = (type) => {
  searchData.value.page = 1;
  active.value = type;
};
const saveContrast = ref({
  type: 'compare',
  targetid: '',
});
const selectedCollegeData = computed(
  () => store.getters.searchCollege.selectedCollege,
);
watch(selectedCollegeData, (newVal) => {
  console.log(newVal, 'newValnewValnewValnewVal');
});
const fetchLikeSave = () => {
  getLikeSave(saveContrast.value).then((res) => {
    if (res.data.code == 20000) {
      checkedDataList.value = res.data.data.compare.split(',');
    }
  });
};
const load = () => {
  searchData.value.page += 1;
  fetchSearchHome();
};
const handleChangeIsSelect = (array1, array2) => {
  // 遍历第一组数组
  for (const item1 of array1) {
    // 获取当前项的 code 值
    const code = item1.code;

    // 在第二组数组中查找相同 code 的项
    const foundItem = array2.find((item) => item.code === code);

    if (foundItem) {
      // 找到相同的项，将 isSelect 设置为 true
      foundItem.isSelect = true;
    }
  }
  // 将第二组数组中不存在于第一组数组中的项的 isSelect 设置为 false
  for (const item2 of array2) {
    const foundInArray1 = array1.find((item) => item.code === item2.code);
    if (!foundInArray1) {
      item2.isSelect = false;
    }
  }
};
const handleTbaleSearch = () => {
  searchData.value.search = searchvalue.value;
  yxkTableList.value = [];
  fetchSearchHome();
};
const fetchSearchHome = () => {
  if (active.value == '1') {
    tableListRef.value.handleTableLoading(true);
  } else if (active.value == '2') {
    majorListRef.value.handleTableLoading(true);
  } else if (active.value == '3') {
    jobListDataRef.value.handleTableLoading(true);
  } else if (active.value == '4') {
    newsListDataRef.value.handleTableLoading(true);
  }
  getSearchHome(searchData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        majorListData.value = {
          ...majorListData.value,
          ...res.data.data[1].data[0],
        };
        jobListData.value = [...jobListData.value, ...res.data.data[2].data];
        yxkTableList.value = [...yxkTableList.value, ...res.data.data[0].data];
        newsListData.value = [...newsListData.value, ...res.data.data[3].data];
        collegeLength.value = res.data.data[0].total;
        majorLength.value = res.data.data[1].total;
        jobListLength.value = res.data.data[2].total;
        newsLength.value = res.data.data[3].total;

        let matchingSchools = yxkTableList.value.filter(
          (school) =>
            checkedDataList.value.includes(school.code) && school.code !== '',
        );
        handleChangeIsSelect(matchingSchools, yxkTableList.value);

        if (active.value == '1') {
          tableListRef.value.handleTableLoading(false);
        } else if (active.value == '2') {
          majorListRef.value.handleTableLoading(false);
        } else if (active.value == '3') {
          jobListDataRef.value.handleTableLoading(false);
        } else if (active.value == '4') {
          newsListDataRef.value.handleTableLoading(false);
        }
      } else {
        if (active.value == '1') {
          tableListRef.value.handleTableLoading(false);
        } else if (active.value == '2') {
          majorListRef.value.handleTableLoading(false);
        } else if (active.value == '3') {
          jobListDataRef.value.handleTableLoading(false);
        } else if (active.value == '4') {
          newsListDataRef.value.handleTableLoading(false);
        }
      }
    })
    .catch(() => {
      if (active.value == '1') {
        tableListRef.value.handleTableLoading(false);
      } else if (active.value == '2') {
        majorListRef.value.handleTableLoading(false);
      } else if (active.value == '3') {
        jobListDataRef.value.handleTableLoading(false);
      } else if (active.value == '4') {
        newsListDataRef.value.handleTableLoading(false);
      }
    });
};
onMounted(() => {
  searchData.value.search = route.query.searchKey;
  searchvalue.value = route.query.searchKey;
  // }
  fetchLikeSave();
  fetchSearchHome();
});
</script>

<style lang="scss" scoped>
#homeSearch {
  .search-box {
    flex: 1;
    margin: 30px 0;
    background: #fff;
  }
  :deep(.el-input-group__append) {
    width: 70px;
    background: var(--background-color);
    color: #fff;
  }
  .my-tabs {
    border-bottom: 1px solid var(--color-text);
    .item-box {
      padding: 10px 30px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
}
.activenav {
  background: var(--color-text);
  color: #fff;
}
</style>
